// import store from "../../store";
import React, { useState, useEffect, useContext, useRef } from 'react';
import { Button, message, Modal, Input } from 'antd';
import type { InputRef } from 'antd'
// import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import './Test1.less'

const MyValue = {
    globName: 'vincent',
    globContent: 'react'
}
const MyContext = React.createContext(MyValue);

function Counter({fromFather, initialCount, messageApi, contextHolder}) {
    const [count, setCount] = useState(initialCount);

     // componentDidMount
     useEffect(() => {
        messageApi.info('页面已加载');
    }, [])

    // componentDidUpdate
    useEffect(() => {
        messageApi.info('当前值已更新');
        callFather()
    }, [count])

    const callFather = () => {
        console.log(count)
        if(count != 0) {
            fromFather(count)
        }
    }
    // useCallback(callFather, [count])

    const resetCount = () => {
        setCount(initialCount)
    }

    const addCount = () => {
        setCount(prevCount => prevCount + 1)
    }

    const minusCount = () => {
        setCount(prevCount => prevCount - 1)
    }

    return (
      <div>
        {contextHolder}
        <div className="content-title">当前值: {count}</div>
        <Button className="updateBtn" onClick={resetCount}>重置</Button>
        <Button className="updateBtn" onClick={minusCount}>-1</Button>
        <Button className="updateBtn" onClick={addCount}>+1</Button>
      </div>
    );
}

function Child() {
    return (
        <div className="child-border">
            <div>子组件</div>
            <Grand />
        </div>
    )
}

function Grand() {
    const val = useContext(MyContext)
    return (
        <div className="grand-border">
            <div>孙组件 - 接收的数据</div>
            <div>{ val.globName }</div>
            <div>{ val.globContent }</div>
        </div>
    )
}

function Test1() {
    // const value = store.getState().value
    const [messageApi, contextHolder] = message.useMessage();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [number, setNumber] = useState(0);
    const { Search } = Input
    const inputRef = useRef<InputRef>(null);

    useEffect(() => {
        inputRef.current!.focus({
            cursor: 'start'
        });
    }, [])

    const showModal = (val) => {
        setIsModalOpen(true);
        setNumber(val)
    };

    const hideModal = () => {
        setIsModalOpen(false);
    };

    const onSearch = (val) => {
        console.log(val)
    }
    
    return (
        <div className="container">
            {/* <Checkbox onChange={onChange}>勾选</Checkbox> */}
            <Modal 
                title="信息" 
                open={isModalOpen} 
                onOk={hideModal} 
                onCancel={hideModal}
                okText="确认"
                cancelText="关闭"
            >
                <p>只在count值改变时弹出，当前值：{number}</p>
            </Modal>
            <div className="title">hook使用</div>
            <div className="subtitle">useState</div>
            <div className="content">
                <Counter fromFather={showModal} initialCount={0} messageApi={messageApi} contextHolder={contextHolder} />
            </div>
            <div className="subtitle">useEffect</div>
            <div className="content">信息提示</div>
            <div className="subtitle">useContext</div>
            <div className="content">
                <MyContext.Provider value={MyValue}>
                    <Child />
                </MyContext.Provider>
            </div>
            <div className="subtitle">useCallback</div>
            <div className="content">
                用useCallback把函数包起来之后，在父组件中只有当deps变化的时候，才会创建新的函数实例，子组件（memo包裹）才会跟着渲染
            </div>
            <div className="subtitle">useMemo</div>
            <div className="content">
                useCallback(fn, deps) 相当于 useMemo(() ={'>'} fn, deps)
            </div>
            <div className="subtitle">useRef</div>
            <div className="content">
                <Search
                    placeholder="请输入（已自动聚焦）"
                    allowClear
                    enterButton="搜索"
                    size="large"
                    ref={inputRef}
                    onSearch={onSearch}
                />
            </div>
            {/* <div className="subtitle">useReducer</div>
            <div className="content"></div>
            <div className="subtitle">useLayoutEffect</div>
            <div className="content"></div>
            <div className="subtitle">useTransition</div> */}
        </div>
    )
}

export default Test1;